<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <button @click="updateName">update name</button>
</template>
<script>
import { reactive, toRef } from 'vue'
// 需求：在模板中渲染 name 和 age
// 下面的写法有待提高
// 第一：我只希望渲染 name 和 age，你却把整个对象都导出了，性能不好！
// 第二：模板中多次用到了 obj.
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // 转换响应式对象中某个属性为单独响应式 ref 数据，并且转换后的值和之前是关联的
    const name = toRef(obj, 'name')
    const age = toRef(obj, 'age')
    const updateName = () => {
      // 转换出来的 name 是一个 ref 类型的，js 中修改一定不要忘了 .value
      name.value = 'xxx'
      // 修改转换出来的 name，也会影响原来响应式对象中的 name
      console.log(obj.name)
      // obj.name = 'xxx'
    }

    return { name, age, obj, updateName }
  },
}
</script>
